<template>

  <!-- 编辑联系人 -->
  <van-contact-card type="edit" :tel="address.tel" :name="address.name" @click="toAdressPage" v-if="address" />

  <!-- 添加联系人 -->
  <van-contact-card type="add" @click="toAdressPage" v-else />

  <!-- 商品信息 -->
  <van-card  :price="info.team" :title="info.name"
      :thumb="info.thumbs_text" :num="nums">
      <template #desc>
          <div v-if="relationids">
              <van-tag size="medium" type="warning" v-for="item in relationids" style="margin-right: 10px;">{{
                  item.name }}</van-tag>
          </div>
          <div v-else>
              <van-tag size="medium" type="danger">无商品规格</van-tag>
          </div>
      </template>
  </van-card>

  <!-- 支付方式 -->
  <van-field v-model="payName" is-link readonly label="支付方式" placeholder="选择支付方式" @click="showPay = true" />
  <van-popup v-model:show="showPay" round position="bottom">
      <van-picker :columns="columnsPay" @cancel="showPay = false" @confirm="onPayConfirm" />
  </van-popup>

  <!-- 订单备注 -->
  <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" maxlength="120" placeholder="请输入留言"
      show-word-limit />

  <!-- 提交订单 -->
  <!-- 参与拼团 -->
  <van-submit-bar v-if="action=='join'" :price="total" button-text="确认拼团" @submit="onJoin" />
  <!-- 发起拼团 -->
  <van-submit-bar v-else :price="total" button-text="确认拼团" @submit="onSubmit" />

</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/order/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const address = ref(proxy.$cookies.get("address") ?? '')
const proid = ref(proxy.$route.query.proid ?? 0)
const nums = ref(proxy.$route.query.nums ?? 0)

const relationids = ref(proxy.$cookies.get("relationids") ? JSON.parse(proxy.$cookies.get("relationids")) : [])
const attrs = ref(proxy.$route.query.attrs ?? 0)
const action = ref(proxy.$route.query.action ?? '');

// 商品信息
const info = ref({})
// 展示支付方式、优惠券状态
const showPay = ref(false)

// 支付方式绑定值
const payName = ref('余额')
const pay = ref('money')
const columnsPay = [
    { text: '余额', value: 'money' },
    { text: '微信', value: 'wx' },
    { text: '支付宝', value: 'zfb' }
]
// 备注
const remark = ref('')
// 选择优惠券
const couponlist = ref([])
const chosenCoupon = ref(-1);

const onlyinfo = ref('')

onBeforeMount(()=>{
  getAddData()
})
const getAddData = async ()=>{
  let result=await Api.ProductDetail({productid:proid.value,busid:LoginUser.id??0})
  if (result.code == 1) {
    // 商品信息
    let productData=result.data.productinfo;
    info.value=productData;
  }

  let res = await Api.OnlyInfo({
      proid: proid.value,
      busid: LoginUser.id,
      relationids: attrs.value,
      nums: nums.value
    })
  if (res.code==1) {
    onlyinfo.value=res.data;
    console.log(onlyinfo.value);
  }
}


// 选中支付方式
const onPayConfirm = ({ selectedOptions }) => {
    showPay.value = false;
    payName.value = selectedOptions[0].text;
    pay.value = selectedOptions[0].value
}

// 跳转地址页面
const toAdressPage = () => {
  proxy.$router.push({
    path: '/business/address/index',
    query: {
      action: 'order'
    }
  })
}

// 确认订单页面 总价格
let total = computed(() => {
  var count = 0
  count = parseFloat(info.value.team) * parseInt(nums.value).toFixed(2)

  return parseFloat(count * 100);
})



// 发起拼团
const onSubmit =async ()=>{
  let data={
    busid: LoginUser.id,
    proid: proid.value,
    businessaddrid: address.value.id,
    pay: pay.value,
    remark: remark.value,
    amount: parseFloat(total.value / 100),
    nums: nums.value
  }

  // 获取选中的属性对象
  if(relationids.value.length>0){
    let attrs=relationids.value.map(item=>item.id)
    data.relationids=attrs.join(',')
  }

  let result=await Api.TeamAdd(data)
  if (result.code == 1) {
    showSuccessToast({
        message: result.msg,
        onClose: function () {
            proxy.$router.push('/team/index')
        }
    })
  }else{
    showFailToast(result.msg);
  }
}


// 参与拼团
const onJoin =async ()=>{
  let data={
    busid: LoginUser.id,
    proid: proid.value,
    businessaddrid: address.value.id,
    pay: pay.value,
    remark: remark.value,
    amount: parseFloat(total.value / 100),
    nums: nums.value
  }

  // 获取选中的属性对象
  if(relationids.value.length>0){
    let attrs=relationids.value.map(item=>item.id)
    data.relationids=attrs.join(',')
    data.attrs=JSON.stringify(onlyinfo.value.attrs)
  }


  // // 参与拼团
  let result=await Api.TeamJoin(data)
  if (result.code == 1) {
    showSuccessToast({
        message: result.msg,
        onClose: function () {
            proxy.$router.push('/team/index')
        }
    })
  }else{
    showFailToast(result.msg);
  }
}


</script>

<style>
.van-submit-bar__text,
.van-card__content,
.van-cell__title {
  text-align: left;
}
.van-card__num{
  text-align: right;
}
</style>